<template>
	<div class="report-warp">
		<!-- 表格START -->
		<div class="report-table" :style="getTableBottom()" style="top:10px;">
			<div class="report-table-container" id="report-table-container" :style="gettableMinWidth()">
				<div class="report-thead" v-show="thead && thead.length>0">
					<!-- 设置表头 -->
					<Row type="flex" justify="space-around">
						<div class="checkboxWarp" v-if="checkable || hasCheckbox">
							<i :class="[checkable || hasCheckbox ? 'checkbox' : '', itemAllChecked ? 'checkbox-checked' : '', hasItemChecked && !itemAllChecked ? 'checkbox-part-checked' : '']"
							 @click="checkAll"></i>
							<!-- <span v-if="serialNumber" class="index">序号</span> -->
						</div>
						<div class="checkboxWarp" v-for="(th, th_index) in thead" v-if="th.index" :style="th.width?'min-width:'+th.width:''">
							<span class="index">{{th.displayName}}</span>
						</div>
						<Col :span="th.name=='auditLoupan'?2:1" v-for="(th, th_index) in thead" :key="th_index" :name="th.name" class="report-flex-col"
						 v-if="!th.index" :style="th.width?'width:'+th.width:''">
						<div class="report-table-th">
							<span class="column-title" :title="th.displayName">{{th.displayName}}</span>
							<!--  <span class="paixubox">
                                 <Icon type="android-arrow-dropup" class="arrowup" @click.native="paixuclick(th.name,'shengxu')"/>
                                 <Icon type="android-arrow-dropdown" class="arrowdown" @click.native="paixuclick(th.name,'jiangxu')"/>
                            </span> -->

						</div>
						</Col>
					</Row>
				</div>

				<div class="report-tdata" v-if="tdata && tdata.length > 0">
					<div class="report-row" v-for="(td, index) in tdata" :key="index" @click.stop="clickRow($event, td, index)" :class="{ 'active' : rowClickedIndex === index }">
						<!-- 设置表格每行展示 -->
						<Row type="flex" justify="space-around">
							<div class="checkboxWarp" v-if="checkable || hasCheckbox">
								<i :class="[checkable || hasCheckbox ? 'checkbox' : '', td.checked ? 'checkbox-checked' : '']" @click="checkItem($event, td)"></i>
								<!-- <span v-if="serialNumber" class="index" v-else>{{1 + index}}</span> -->
							</div>
							<div class="checkboxWarp" :key="th_index" v-for="(th, th_index) in thead" v-if="th.index" :style="th.width?'min-width:'+th.width:''">
								<span class="index">{{pagerData.startRow+index}}</span>
							</div>
							<Col :span="th.name=='auditLoupan'?2:1" v-for="(th, index_th) in thead" :key="index_th" class="report-flex-col"
							 v-if="!th.index" :style="th.width?'width:'+th.width:''">


							<div v-if="th.name=='auditArticles'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="toView(td)">查看</a>
								<!-- <a href="javascript:;" class="setvalid" @click="toAudit(td)">审核</a> -->
								<a href="javascript:;" class="setvalid" @click="toCheck(td)">精编</a>
								<a v-if="td.status=='下架'" href="javascript:;" class="setvalid" @click="tobackUp(td)">上架</a>
								<a v-if="td.status=='上架'" href="javascript:;" class="setvalid" @click="tobackOut(td)">下架</a>
								<span v-if="articlesMainPush" style="margin-top:-3px;">
									<a v-if="td.mainPush=='主推'" href="javascript:;" class="setvalid" @click="mainOut(td)">取消主推</a>
									<a v-if="td.mainPush=='取消主推'" href="javascript:;" class="setvalid" @click="mainUp(td)">主推</a>
								</span>
							</div>

							<div v-if="th.name=='auditLoupan'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="toView(td)">查看</a>
								<span v-if="viewEdit" style="margin-top:-3px;">
									<a href="javascript:;" class="setvalid" @click="toCheck(td)">精编</a>
									<a href="javascript:;" class="setvalid" @click="tobackUp(td)">
										{{td.buildingStatus==0?"上架":"下架"}}
									</a>
								</span>
								<!-- <a href="javascript:;" class="setvalid" @click="toZhutu(td)">推广</a> -->
							</div>

							<!-- 大V入口列表 -->
							<div v-if="th.name=='bigVaction'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="toView(td)">查看</a>
								<a href="javascript:;" class="setvalid" @click="toCheck(td)">编辑</a>
								<a v-if="td.status=='下架'" href="javascript:;" class="setvalid" @click="tobackUp(td)">上架</a>
								<a v-if="td.status=='上架'" href="javascript:;" class="setvalid" @click="tobackOut(td)">下架</a>
								<a v-if="td.status=='草稿'" href="javascript:;" class="setvalid" @click="tobackdelect(td)">删除</a>
							</div>
							<!-- call 入口列表 -->
							<div v-if="th.name=='callaction'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="toView(td)">查看</a>
								<a href="javascript:;" class="setvalid" @click="toCheck(td)">跟进</a>
							</div>
							<div v-if="th.name=='action'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="toView(td)">查看</a>
								<!-- <a href="javascript:;" class="setvalid" @click="toAudit(td)">审核</a> -->
								<a href="javascript:;" class="setvalid" @click="toCheck(td)">编辑</a>
								<a href="javascript:;" class="setvalid" @click="tobackUp(td)">
									{{td.buildingStatus==0?"上架":"下架"}}
								</a>
							</div>
							<div v-if="th.name=='apartment'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="commconBack(td,'view')">查看</a>
								<a href="javascript:;" class="setvalid" @click="commconBack(td,'edit')">编辑</a>
								<a href="javascript:;" class="setvalid" @click="commconBack(td,'del')">删除</a>
							</div>
							<div v-if="th.name=='author'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="setvalid" @click="commconBack(td,'edit')">编辑</a>
								<a href="javascript:;" class="setvalid" @click="commconBack(td,'del')">删除</a>
							</div>
							<div v-if="th.name=='tuandui'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="commconBack(td,'view')">
									{{td.status==0?"启用":"禁用"}}
								</a>
								<a href="javascript:;" class="setvalid" @click="commconBack(td,'edit')">
									{{td.huzeren=="是"?"":"设置为主负责人"}}</a>
							</div>

							<div v-if="th.name=='youhuiquan'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="commconBack(td,'view')">查看</a>
								<a href="javascript:;" class="showdetail" @click="commconBack(td,'caozuo')">
									{{td.discountStatus==0?"上架":"下架"}}
								</a>
							</div>
							<div v-if="th.name=='videoed'" class="report-flex-col_div" :title="td[th.name]">
								<a href="javascript:;" class="showdetail" @click="toView(td)">查看</a>
								<a href="javascript:;" class="setvalid" @click="toCheck(td)">编辑</a>
								<a v-if="td.videoStatus=='下架'" href="javascript:;" class="setvalid" @click="tobackUp(td)">上架</a>
								<a v-if="td.videoStatus=='上架'" href="javascript:;" class="setvalid" @click="tobackOut(td)">下架</a>
								<a v-if="td.videoStatus=='草稿'" href="javascript:;" class="setvalid" @click="tobackdelect(td)">删除</a>
							</div>


							<div v-else class="report-flex-col_div" :title="td[th.name]">
								<!-- <span v-if="th.name=='kehu'">{{ td["customerName"] }}
                  <p>电话:{{td["phoneNo"]}}</p>
                </span>

                <span v-if="th.name=='qian'">{{ td["planmoney"] | toMoney}}</span>

                <span v-if="th.name=='fangyuan'">
                  {{ td["aptName"] }} {{ td["area"] }}m²
                  <p>单价:{{ td["unitPrice"] }}元/m² 总价{{ td["totalPrice"] }}元</p>
                </span>

                <span v-if="th.name=='shijidaozhang'">{{ td["realPayAmount"] | toMoney}}</span>

                  <span v-if="th.name=='weidaozhang'">{{ td["noPayAmount"] | toMoney}}</span>-->

								<span v-if="th.name=='oriented'">{{td['oriented'] | towards }}</span>
								<span v-else-if="th.name == 'salesStatus'">{{td['salesStatus'] | saled}}</span>
								<span v-else-if="th.name == 'certificateType'">{{td['certificateType'] | certificated }}</span>
								<span v-else-if="th.name == 'authorPortrait'">

									<span v-if="td[th.name]==''||td[th.name]==null">无</span>
									<span v-else><img :src="td[th.name]" height="40px;"></span>
								</span>
								<span v-else-if="th.name == 'videoCover'" @click="transmit(td)">
									<span v-if="td[th.name]==''||td[th.name]==null">无</span>
									<span v-else>
										<video :src="td[th.name]" width="160" height="120" controls="controls">
											您的浏览器不支持 video 标签。
										</video>
									</span>
								</span>
								<span v-else>{{ td[th.name] }}</span>
							</div>
							</Col>
						</Row>
					</div>
				</div>
				<div v-if="tdata.length < 1" class="reportTablenodata">
					<div class="alert">
						<i></i> 暂无数据
					</div>
				</div>
				<!-- 暂无数据 -->
				<div v-if="!loading && !initShow && tdata.length < 1" class="reportTablenodata">
					<div class="report-nodata alert">
						<i></i> 暂无数据
					</div>
				</div>
			</div>
			<!-- 加载中START -->
			<div class="c-loadingwarp" v-if="loading">
				<div class="c-gridTableloading">
					<div class="c-gridTableDemo-spin-col">
						<Spin fix>
							<Icon type="load-c" size="22" class="c-demo-spin-icon-load"></Icon>
							<div>正在加载</div>
						</Spin>
					</div>
				</div>
			</div>
		</div>

		<!-- 分页START -->
		<div class="report-tfoot">
			<Row>
				<div class="clear"></div>
				<div class="totalCount">当前第 {{pagerData.current}}页当前第 {{pagerData.startRow}} 到第 {{pagerData.endRow}} 条，共
					{{pagerData.total}} 条</div>
				<Page ref="refPager" :current="pagerData.current" :total="pagerData.total" :pageSize="pagerData.rows" class="pager"
				 show-sizer :pageSizeOpts="rowOptions" placement="top" show-elevator @on-change="pageChange" @on-page-size-change="rowChange"></Page>
			</Row>
		</div>
		<!-- 分页END -->
		<Modal v-model="modal1" title="操作" @on-ok="queqing" @on-cancel="quxiao">
			<p>{{str}}</p>
		</Modal>

		<Modal v-model="tishi" width="350" title="提示" @on-ok="ok" @on-cancel="cancel">
			<p>确定删除吗？</p>
		</Modal>
	</div>
</template>
<script>
	import Vue from 'vue';
	;
	import consts from '@/utils/consts';
	import Rest from '@/rest';
	import Api from '@/api';
	import Helper from '@/common/helper';
	//import Bus from '@/store/bus';

	export default {
		data() {
			return {
				hasItemChecked: false, // 是否部分选中
				itemAllChecked: false, // 是否全选
				checkedItemCount: 0, // 选中个数
				td: {},
				tishi: false,
				listProtected: [],
				allProtectedDay: 1,
				setData: {},
				modal1: false,
				str: '',
				msg: '',
				nodata: false,
				objValue: {},
				rowClickedIndex: null,
				thead: [],
				current: 1,
				rowOptions: [10, 15, 30, 50], // 每页条数切换的配置
				articlesMainPush: false,
				viewEdit: false
			};
		},
		components: {},
		filters: {
			// 科学计数法
			toMoney: function(val, fix, reVal) {
				var that = this;
				fix = !isNaN(fix) ? fix : 2;
				if (val && val > 0) {
					return Helper.moneyFormart(val, fix);
				} else if (val && val < 0) {
					var data = Helper.moneyFormart(Math.abs(val), fix);
					return '-' + data;
				} else {
					return reVal ? ' ' : '0';
				}
			},
			checkDicName: function(value, field) {
				if (field == 'productName') {
					var data = consts.runProduc;
				}
				if (field == 'activityPosition') {
					var data = consts.runActivity;
				}
				if (field == 'isClick') {
					var data = consts.isshared;
				}
				if (field == 'status') {
					var data = consts.runState;
				}
				value = $.trim(value);
				if (value != '' && data != undefined && data != '') {
					for (var i = 0; i < data.length; i++) {
						if (data[i]['Id'] == value) {
							return data[i]['name'];
						}
					}
				}
				return value == 0 ? '' : value;
			},
			// 根据返回的数字类型，显示对应的朝向
			towards: function(value) {
				if (value == 1) {
					return '正南'
				} else if (value == 2) {
					return '正北'
				} else if (value == 3) {
					return '正东'
				} else if (value == 4) {
					return '正西'
				} else if (value == 5) {
					return '东南'
				} else if (value == 6) {
					return '西南'
				} else if (value == 7) {
					return '东北'
				} else {
					return '西北'
				}
			},
			// 销售状态
			saled: function(value) {
				if (value == 1) {
					return '待售'
				} else if (value == 2) {
					return '在售'
				} else {
					return '售罄'
				}
			},
			certificated: function(value) {
				if (value == 1) {
					return '预售许可证'
				} else {
					return '出售许可证'
				}
			}
		},
		methods: {
			init() {
				var that = this;
				that.itemAllChecked = false
				that.hasItemChecked = false
				that.thead = that.tableParmes.thead;
				this.getMainPush()
			},
			getMainPush() {
				var roles = JSON.parse(Helper.get('roles'));
				var rolesList = Helper.deepClone(consts.ROLESLIST);
				// console.log(roles)
				for (let i = 0; i < roles.length; i++) {
					if (roles[i].roleId == 4) {
						this.articlesMainPush = true
					}
					if (roles[i].roleId == 4 || roles[i].roleId == 5) {
						this.viewEdit = true
					}

				}

			},
			ok() {
				var that = this;
				Helper.globalLoading_show();
				var restApi =
					Api.caseManage.params.case.delPayPlanByPayPlanId +
					'/' +
					that.td.payPlanId;
				Rest.delete(restApi).done(function(res) {
					if (Helper.isSuccess(res)) {
						that.$Message.success('删除成功!');
						that.$emit('pageInit');
					} else {
						that.$Message.error(res.status.msg);
					}
					Helper.globalLoading_hide();
				});
			},
			cancel() {},
			// 选择复选框
			checkItem(e, item) {
				var checkedList = [];
				item.checked = !item.checked;
				this.updateCheckedStats();
				e.stopPropagation();
				this.tdata.forEach(item => {
					if (item.checked) checkedList.push(item);
				});
				this.$emit('selection-change', checkedList);
			},
			// 全选
			checkAll(e) {
				var checkedList = [];
				if (this.itemAllChecked) {
					// 已全选，取消全选
					this.tdata.forEach(function(item) {
						item.checked = false;
					});
				} else {
					// 未全选，全选
					this.tdata.forEach(function(item) {
						item.checked = true;
					});
				}
				this.updateCheckedStats();
				e.stopPropagation();
				this.tdata.forEach(item => {
					if (item.checked) checkedList.push(item);
				});
				this.$emit('selection-change', checkedList);
			},
			// 更新选中状态
			updateCheckedStats() {
				var _this = this;
				_this.checkedItemCount = 0;
				if (this.tdata && this.tdata.length > 0) {
					this.itemAllChecked = this.tdata.every(item => item.checked);
					this.hasItemChecked = this.tdata.some(item => item.checked);
					this.tdata.forEach(item => {
						if (item.checked) _this.checkedItemCount++;
					});
				} else {
					this.itemAllChecked = false;
					this.hasItemChecked = false;
					this.checkedItemCount = 0;
				}
				this.$forceUpdate();
			},
			commconBack(v, f) {
				this.$emit('tableBack', v, f);
			},
			// 查看
			toView(td) {
				var that = this;
				that.$emit('toView', td);
			},
			// 审核
			toAudit(td) {
				var that = this;
				that.$emit('toAudit', td);
			},
			// 编辑
			toCheck(td) {
				var that = this;
				that.$emit('toCheck', td);
			},
			toZhutu(td) {
				var that = this;
				that.$emit('toZhutu', td);
			},

			// 上架
			tobackUp(td) {
				var that = this;
				that.$emit('tobackUp', td);
			},
			// 下架
			tobackOut(td) {
				var that = this;
				that.$emit('tobackOut', td);
			},
			tobackdelect(td) {
				var that = this;
				that.$emit('tobackdelect', td);
			},
			// 播放
			transmit(td) {
				var that = this;
				that.$emit('transmit', td);
			},
			// 主推
			mainUp(td) {
				var that = this;
				that.$emit('mainUp', td);
			},
			// 取消主推
			mainOut(td) {
				var that = this;
				that.$emit('mainOut', td);
			},
			queqing(id, status) {
				var that = this;
				Helper.globalLoading_show();
				var restApi = Api.operateset.operateInfo.isDisables;
				var stateParams = {
					id: id,
					status: status == 3 ? 2 : 3
				};
				Rest.put(restApi, stateParams).done(function(res) {
					if (Helper.isSuccess(res)) {
						that.$Message.success('更改成功！');
						that.$emit('pageInit');
					} else {
						that.$Message.error(res.status.msg);
					}
					Helper.globalLoading_hide();
				});
			},
			quxiao() {
				this.modal1 = false;
			},

			view(flage, v) {
				// 呼叫客户
				var that = this;
			},
			pageChange(page) {
				var that = this;
				that.pagerData.page = page;
				// console.log('page', page);
				that.$emit('updataList', that.pagerData);
			},
			rowChange(rows) {
				var that = this;
				that.pagerData.rows = rows;
				that.pagerData.page = 1;
				// console.log('rows', rows);
				this.$emit('updataList', that.pagerData);
			},
			// 点击行
			clickRow(e, rowData, index) {
				var query = {};
				if (index >= 0) {
					query.flage = 'view';
					query.id = rowData.id;
				} else {
					query.flage = 'add';
				}
				// this.$router.push({path: 'call_formpage',query:query});
			},

			gettableMinWidth() {
				var that = this;
				if (that.tableParmes.tableMinWidth) {
					return 'min-width:' + that.tableParmes.tableMinWidth;
				} else {
					var thlen = that.tableParmes.thead.length;
					var width = 0;
					var minwidth = 900;
					for (var i = 0; i < thlen; i++) {
						width += 90;
					}
					if (minwidth >= width) {
						width = minwidth;
					}
					return 'min-width:' + (width * 1 + 500) + 'px';
				}
			},
			getTableBottom() {
				var that = this;
				if (that.pagerData.isPage) {
					// return 'bottom:' + '58px';
				} else {
					// return 'bottom:' + '-40px';
					// return 'bottom:' + '58px';
				}
			}
		},
		created() {
			this.loading = false;
			this.init();
		},
		computed: {},
		props: {
			tableParmes: {
				type: Object,
				default: function() {
					return {
						thead: [],
						tableMinWidth: ''
					};
				}
			},
			tdata: {
				type: Array,
				default: []
			},
			modalTbale: {
				type: Boolean,
				default: false
			},
			pagerData: {
				type: Object
			},
			loading: {
				type: Boolean,
				default: false
			},
			initShow: {
				type: Boolean,
				default: true
			},
			checkable: {
				// 每一列是否可选
				type: Boolean,
				default: ''
			},
			hasCheckbox: {
				// 是否展示多选框
				type: Boolean,
				default: false
			},
			serialNumber: {
				// 是否展示序号
				type: Boolean,
				default: false
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import "../../assets/sass/install";

	.formList {
		width: 100%;
		margin-top: 38px;
		border: none;
	}

	.protect {
		overflow: hidden;
	}

	.protect div {
		float: left;
		height: 34px;
		line-height: 34px;
		font-size: 15px;
		color: #86888a;
	}

	.protect input {
		float: left;
		width: 310px;
		text-align: center;
	}

	.table table {
		width: 100%;
		margin-top: 28px;
		font-size: 14px;
		border-collapse: collapse;
	}

	.formList table th {
		color: #0e0e0e;
		vertical-align: middle;
	}

	.formList table th {
		font-size: 15px;
	}

	.formList table td,
	.formList table th {
		padding: 10px 15px;
		border: 1px solid #dddfe2;
	}

	.formList table tr:nth-child(even) {
		background-color: #fff;
	}

	.formList table td {
		vertical-align: middle;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.formList table td,
	.formList table th {
		padding: 10px 15px;
		border: 1px solid #dddfe2;
	}

	.formList table input[type=text] {
		height: 26px;
		line-height: 26px;
		width: 50%;
		text-align: center;
		color: #8f9193;
		background: 0 0;
	}

	.titleTab {
		color: #5e5f5f;
		font-size: 16px;
		height: 48px;
		line-height: 48px;
		width: 100%;
		float: left;
		width: 300px;
	}

	.titleTab div {
		float: left;
		height: 100%;
		width: 120px;
		text-align: center;
		cursor: pointer;
	}

	.titleTab div.active {
		color: #02b0f0;
		position: relative;
	}

	.paixubox {
		position: relative;
		display: inline-block;
		margin-top: 5px;
	}

	.arrowup,
	.arrowdown {
		display: block;
		font-size: 19px;
		font-weight: bold;
		height: 10px;
		width: 7px;
	}

	.report-warp {
		position: relative;
		height: 100%;
		width: 100%;

		.report-table {
			position: absolute;
			top: 0px;
			right: 0;
			left: 0;
			bottom: 0;
			border: 1px solid $thBorderColor;
			background: url(../../assets/images/grid-bg.png) repeat 0 0;
			@include overflowCss();
			overflow-x: auto;
			overflow-y: hidden;

			.report-table-container {
				background-color: white;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0px;
				padding-top: 48px;

				/*min-width: 1020px;*/
				.checkboxWarp {
					// min-width: 100px;
					height: 150px;
					text-align: left;
					height: 40px;
					line-height: 40px;
					padding-left: 15px;
					color: #8c8b8b;
				}
			}

			.report-thead {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				padding-right: 10px;

				&:after {
					position: absolute;
					right: 0;
					top: 0;
					content: '';
					width: 10px;
					height: 40px;
					background-color: #f5f5f5;
					border-bottom: 1px solid #ddd;
				}

				;

				/*z-index: 1;*/
				&:hover {
					.ivu-col {
						.report-filter-container {
							display: inline-block;
						}
					}
				}

				.ivu-col {
					height: 40px;
					line-height: 40px;
					background-color: $thBG;
					border-bottom: 1px solid $thBorderColor;
					text-align: center;
					cursor: pointer;
					padding-left: 13px;

					&.last-child {
						border-left: 1px solid $thBorderColor;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.report-filter-container {
						display: inline-block;
						padding: 0 8px;
					}

					.setting {
						display: inline-block;
						width: 21px;
						height: 21px;
					}

					.index {
						color: #666666;
						font-weight: bold;
					}

					.report-table-th {
						height: 100%;
						position: relative;

						.column-title {
							display: inline-block;
							vertical-align: top;
							color: #666666;
							font-weight: bold;
							max-width: 100%;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
				}

				.report-flex-col {
					flex-grow: 1;
				}

				.checkboxWarp {
					background-color: #f5f5f5;
					border-bottom: 1px solid #d5d5d5;
					font-weight: bold;
					color: #666666;
				}
			}

			.report-tdata {
				overflow-y: scroll;
				position: absolute;
				left: 0;
				right: 0;
				top: 40px;
				bottom: 60px;
				background: url(../../assets/images/grid-bg.png) repeat 0 0;
				background-size: 1px 41px;

				.report-row {
					background-color: white;
					border-bottom: 1px solid $tdBorderColor;
					@include transition(500ms, background-color);
					cursor: pointer;
					height: 150px;

					&.active {
						background-color: $tdBorderColor;
					}

					&:last-child {
						border-bottom: none;
					}

					&:hover {
						background-color: $tdBorderColor;
					}

					.report-flex-col_hover {
						color: #02b0f0;

						.report-flex-col_div {
							display: flex;
							cursor: pointer;
							height: 40px;
							align-items: center;
						}
					}

					.tip_icon {
						display: inline-block;
						vertical-align: middle;
						margin-top: 1px;
						width: 18px;
						height: 20px;
						background: url(../../assets/images/icons.png) no-repeat -461px -1045px;
					}
				}

				.report-row_nocursor {
					cursor: default;
				}

				.ivu-col {
					height: 40px;
					padding-left: 13px;
					color: #8c8b8b;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					span {
						display: inline-block;
						vertical-align: middle;
						max-width: 100%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						padding-right: 10px;
					}
				}

				.report-flex-col {
					flex-grow: 1;
					overflow: hidden;
					height: 120px;
					padding-top: 2px;
					padding-bottom: 5px;

					.report-flex-col_div {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						padding-right: 10px;
						margin: auto;
					}
				}

				@include overflowCss();
			}

			.reportTablenodata {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				color: #8f8f8f;

				.alert {
					text-align: center;
					position: fixed;
					width: 240px;
					left: 50%;
					top: 50%;
					margin-left: -10px;
					margin-top: -50px;

					i {
						display: block;
						width: 78px;
						height: 90px;
						border-radius: 50px;
						margin: 0 auto;
						background: url(../../assets/images/customer_icons.png) no-repeat -218px -490px;
						margin-bottom: 5px;
					}
				}

				.report-nodata {
					i {
						background: url(../../assets/images/customer_icons.png) no-repeat -138px -492px;
					}
				}

				.modalAlert {
					margin-left: -120px;
				}
			}
		}
	}

	.report-tfoot {
		width: 100%;
		position: absolute;
		left: 0;
		right: 20px;
		bottom: 10px;
		height: 49px;

		.ivu-row {
			border: 1px solid $thBorderColor;
			border-bottom: 0;
			padding: 8px 15px 4px 15px;
			background-color: #fff;
		}

		.clear {
			display: inline-block;
			height: 32px;
			line-height: 32px;
		}

		.totalCount {
			position: absolute;
			height: 32px;
			line-height: 32px;
			display: inline-block;
			vertical-align: top;
			color: #657180;
		}

		.pager {
			display: inline-block;
			vertical-align: top;
			position: absolute;
			right: 20px;
			background-color: #fff;
			padding-left: 50px;
		}
	}
</style>
